<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Multiday Units view</title>
</head>
	<script src="../../codebase/dhtmlxscheduler.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_limit.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_units.js?v=5.3.10" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.3.10" type="text/css" charset="utf-8">
	
<style type="text/css" >
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
</style>

<script type="text/javascript" charset="utf-8">
	function init() {

		var sections=[
			{key:1, label:"Section A"},
			{key:2, label:"Section B"},
			{key:3, label:"Section C"},
			{key:4, label:"Section D"}
		];
		
		scheduler.locale.labels.week_unit_tab = "Week units";
		scheduler.locale.labels.single_unit_tab = "Units";
		scheduler.locale.labels.section_custom="Section";
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;

		scheduler.config.first_hour = 8;
		scheduler.config.last_hour = 19;

		scheduler.config.lightbox.sections=[	
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
			{name:"time", height:72, type:"time", map_to:"auto"}
		];

		scheduler.createUnitsView({
			name:"week_unit",
			property:"section_id",
			list:sections,
			days:7
		});
		scheduler.date.week_unit_start = scheduler.date.week_start;


		scheduler.createUnitsView({
			name:"single_unit",
			property:"section_id",
			list:sections
		});

		scheduler.addMarkedTimespan({
			type:"dhx_time_block",
			start_date: new Date(2017, 6, 2, 3, 0),
			end_date: new Date(2017, 6, 2, 6, 0),
			sections: {'week_unit':[3,4] }
		});


		scheduler.addMarkedTimespan({
			type:"dhx_time_block",
			zones:"fullday",
			days:0,
			sections: {'week_unit':[4] }
		});

		scheduler.addMarkedTimespan({
			type:"dhx_time_block",
			zones:"fullday",
			days:6
		});

		scheduler.init('scheduler_here',new Date(2017, 5, 30),"week_unit");
		scheduler.load('data/units.json');
	}
</script>

<body onload="init();">
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="week_unit_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="single_unit_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
</body>